<template>
	<view class="Assemble_goods">
		<swiper class="swiper" indicator-dots indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in goodData.img" :key="index"><image :src="item" mode=""></image></swiper-item>
		</swiper>
		<view class="goods_name">
			<p class="left">
				<text class="text1">{{ goodData.price }} <text style="font-size: 24upx;padding-left: 10upx;">积分</text></text>
			</p>
			<p class="p1">
				<text class="text2">{{ goodData.title }}</text>
			</p>
			<p class="p2">
				<text class="text1">累计{{ goodData.sales }}份</text>
				<text style="margin: 0 10upx;">|</text>
				<text class="text2" :style="{ color: newColor.color }">剩余{{ goodData.inventory }}份</text>
			</p>
		</view>
		<view class="goods_bottom">
			<p class="p1">
				<text class="text1">预计到货时间</text>
				<text class="text2">{{goodData.get_date}}</text>
			</p>
		</view>
		<p class="submit" :style="{ background: newColor.color }" @tap="onpintuan">去兑换</p>
		<ourLoading isFullScreen :active="active" text="loading..." />
	</view>
</template>

<script>
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getUserInfo, setRecommend, setIntegral,getToken } from '@/static/utils/ahth.js';
export default {
	components: {
		uniCountdown,
		uniPopup,
	},
	data() {
		return {
			active: true,
			goodData: {},
			postion: {},
			grouplist: [],
			ceshi: 10,
			nowdata: {},
			userInfo: getUserInfo(),
			specClass: '',
			selectArr: [],
			shopItemInfo: {},
			subIndex: [],
			price: 0,
			numprice: 0,
			optionName:'',
			kucun: 0,
			sku: [],
			skuAllData: [],
			number: 1,
			optionId:'',
			formData:'',
			master:{},
			timeData:{},
			noData:{},
			dataList:[],
			times:0,
			timeInter:'',
			goodid:'',
			propId:''
		};
	},
	onHide() {
		console.log('页面隐藏了');
		// this.pause()
		clearInterval(this.timeInter)
	},
	onUnload() {
		console.log('页面离开了');
		// this.pause()
		clearInterval(this.timeInter)
	},
	onLoad() {
		this.goodid = this.$Route.query.goodid
		this.propId = this.$Route.query.propId || ''
		this.getGoodData()
		setTimeout(()=>{
			this.active = false
		}, 600)
	},
	methods: {
		setHaomiao(){
			let that = this
			clearInterval(that.timeInter)
			that.times = 99
			that.timeInter = setInterval(()=>{
				if(that.times > 0){
					that.times --
				}else{
					that.times = 99
				}
			},20)
		},
		openpop() {
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		 pause() {
		    const countDown = this.selectComponent('.countdown');
		    countDown.pause();
		  },
		hideSpec() {
			console.log('点击了')
			//回调
			this.specClass = 'hide';
			setTimeout(() => {
				this.specClass = 'none';
			}, 200);
		},
		onChange(e) {
		  // e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
		  // this.timeData = e.detail
		},
		onChangenoData(e){
			// e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
			// this.noData = e.detail
		},
		onChangeItem(e){
			e.detail.milliseconds = (e.detail.milliseconds / 10).toFixed(0)
			let timeData = e.detail
			let index = e.target.dataset.item
			this.dataList[index] = e.detail
		},
		setPostion() {
			//选择提货点
			this.$Router.push({
				path: '/pages/home/setlocation',
				query: {
					goodid: this.goodid,
					status: 1
				}
			});
		},
		setMaster() {
			//选择服务点		
				this.$Router.push({
				path: '/pages/home/setMaster',
				query: {
					goodid: this.goodid,
					status: 1
				}
			});
		},
		gotoAdd(item) {
			//去参团
			this.nowdata = item;
			if(!getToken() || getToken() == ''){
				uni.showModal({
					title:'提示',
					content:'您还没有登录,是否前去登录?',
					confirmColor:this.newColor.color,
					confirmText:'去登录',
					success: (res) => {
						if(res.confirm){
							this.$Router.push({path:'/pages/login/login'})
						}
					}
				})
				return
			}
			this.$refs.popup.close();
			this.$refs.popup1.open();
		},
		close1() {
			this.$refs.popup1.close();
		},
		getUserInfos() {
			this.request('user/getUserInfo', {}).then(res => {
				// this.locationId = res.data.goods_point_id;
				this.getdefault(res.data.goods_point_id);
				this.getMasters(res.data.leader_id);
			});
		},
		getdefault(id) {
			//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res);
				this.postion = res.data;
			});
		},
		getMasters(id) {
			this.request('user/getGoodsPointLeaderInfo', {
				type: 2,
				type_id: id || ''
			}).then(res => {
				console.log(res);
				this.master = res.data;
			});
		},
		discard(){
			//丢弃
		},
		getGoodData() {
			//获取商品详情
			this.request('CreditGoods/getGoodsDetail', {
				id: this.goodid
			}).then(res => {
				console.log(res);
				this.goodData = res.data.goods_info;
				if(res.data.group_list){
					this.grouplist = res.data.group_list;
					this.setHaomiao()
				}
			});
		},
		setFrom(html){ //处理富文本 让图片居中适应
					let newContent = html.replace(/\<img/gi,   '<img class="rich-img" ' );
					console.log(newContent);
					this.formData = newContent
				},
		onskuSubmit(data) {
			//完成商品选择
			console.log(data);
			data.push(this.goodData);
			setGoodData(data); //存储商品信息 跳转到提交订单页面
			this.$Router.push({
				path: '/pagesA/pages/order/confirmation',
				query: {
					group: 1,
					iscart: 0
				}
			});
		},
		onpintuan() {
			// if (!this.postion.shop_name || this.postion.shop_name == '') {
			// 	uni.showToast({
			// 		title: '请选择提货点',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			// if (!this.master.user_name || this.master.user_name == '') {
			// 	uni.showToast({
			// 		title: '请选择服务点,
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			setIntegral(this.goodData)
			this.$Router.push({path:'/pagesA/pages/orchard/order/placeOrder',query:{
				propId: this.propId
			}})
		},
		ongoto(){
			this.goodData.price = this.price
			this.goodData.num = this.number
			this.goodData.option_title = this.optionName
			this.nowadd()
		},
		nowadd() {
			//去参团
			console.log(this.optionId)
			console.log(this.nowdata);
			let data = [];
			this.goodData.option_id = this.optionId
			data.push(this.goodData);
			setGoodData(data);
			this.$refs.popup1.close();
			this.$Router.push({
				path: '/pagesA/pages/order/confirmation',
				query: {
					group: 1,
					iscart: 0,
					teamid: this.nowdata.team_id,
					optionId: this.optionId
				}
			});
		},
		setTime(data) {
			//计算时间
			// 判断当前是否在拼团开启时间内
			if (!data) {
				return;
			}
			let time = {}
			let newtime = data * 1000;
			// 获取剩余天数
			time.day = Math.floor(newtime / 1000 / 60 / 60 / 24);
			var daysRound = Math.floor(time.day);
			time.hours = Math.floor(newtime / 1000 / 60 / 60 - 24 * daysRound);
			var hoursRound = Math.floor(time.hours);
			time.minutes = Math.floor(newtime / 1000 / 60 - 24 * 60 * daysRound - 60 * hoursRound);
			var minutesRound = Math.floor(time.minutes);
			time.seconds = Math.floor(newtime / 1000 - 24 * 60 * 60 * daysRound - 60 * 60 * hoursRound - 60 * minutesRound);
			return time;
		},
		setSku() {
			//选择商品规格
			this.selectArr = [];
			this.shopItemInfo = {};
			this.subIndex = [];
			this.price = 0;
			this.kucun = 0;
			this.getSkuAll();
			this.getSkuList();
			setTimeout(() => {
				uni.hideTabBar();
			}, 200);
		},
		getSkuList() {
			//获取商品的规格
			this.request('goods/getGoodsSpecs', {
				goods_id: this.goodid
			}).then(res => {
				console.log(res);
				this.sku = res.data;
				this.checkItem(-1);
			});
		},
		getSkuAll() {
			//获取商品的所有规格信息 方便匹配对比
			this.request('goods/getGoodsOption', {
				goods_id: this.goodid,
				type: 0
			}).then(res => {
				console.log(res);
				this.skuAllData = res.data;
				console.log(this.skuAllData);
				this.initializeData();
			});
		},
		/**
		 * @param setSkuList 选择规格
		 * @param checkItem 对规格进行筛选 只显示当前选中的
		 * @param initializeData 对规格数据进行处理
		 */
		setSkuList(item, n, index) {
			//设置规格的选中
			console.log(item);
			this.shows = true;
			if (this.selectArr[n] != item) {
				this.$set(this.selectArr, n, item);
				this.$set(this.subIndex, n, index);
			} else {
				this.$set(this.selectArr, n, '');
				this.$set(this.subIndex, n, -1); //去掉选中颜色
			}
			this.checkItem(n);
		},
		checkItem(clickIndex) {
			//对规格进行筛选 如果不符合要求的规格不能选择
			var option = this.sku;
			var x = '';
			for (let i = 0, len = option.length; i < len; i++) {
				//遍历规格列表
				if (i == clickIndex) {
					continue;
				}
				let len2 = option[i].goods_spec_item.length;
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.sku[i].goods_spec_item[j].item_title);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					let data = this.selectArr.join('_');
					this.skuAllData.forEach(e => {
						if (e.title == data) {
							this.kucun = Number(e.inventory);
							this.price = e.price;
							this.numprice = e.price
							this.optionName = e.title
							this.optionId = e.option_id
							console.log(this.optionId)
							console.log(e);
						}
					});
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', true);
					} else {
						this.$set(this.sku[i].goods_spec_item[j], 'isShow', false);
					}
				}
			}
		},
		initializeData() {
			//计算有多小种可选路径
			console.log('执行了');
			let result = this.skuAllData.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.title.split('_').reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		sub(item) {
			//减少商品
			if(this.number == 1){
				return
			}else{
				this.number--
				this.numprice = this.number * this.price
			}
		},
		add(item) {
			//增加商品到购物车
			if(this.kucun == 0){
				return
			}
			if(this.number >= this.kucun){
				return
			}
			this.number++
			this.numprice = this.number * this.price
		},
	}
};
</script>

<style lang="scss" scoped>
.Assemble_goods {
	background-color: #f2f2f2;
	overflow: hidden;
	margin-bottom: 100upx;
	.swiper {
		width: 100vw;
		height: 80vw;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.price {
		background-color: #f23a3a;
		height: 110upx;
		width: 100%;
		.left {
			float: left;
			height: 110upx;
			width: 50%;
			box-sizing: border-box;
			padding: 20upx 30upx;
			color: #ffffff;
			.text1 {
				font-size: 46upx;
				margin-right: 20upx;
			}
			.text2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			float: right;
			height: 110upx;
			width: 50%;
			text-align: center;
			background: url('');
			background-size: cover;
			background-repeat: no-repeat;
			> p {
				font-size: 22upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(242, 58, 58, 1);
				line-height: 40rpx;
			}
			.time_down {
				position: relative;
				left: 60upx;
				top: 5upx;
			}
		}
	}
}
.goods_name {
	padding: 30upx;
	background-color: #fff;
	.left {
		margin-bottom: 20upx;
		position: relative;
		.text1 {
			color: #e4393c;
			font-size: 40upx;
			font-weight: bold;
			margin-right: 10upx;
		}
		.text2 {
			color: #999999;
			text-decoration: line-through;
			margin-top: 10upx;
			font-size: 24upx;
		}
	}
	.p1 {
		overflow: hidden;
		.hot_ig{
			width: 40upx;
			height: 40upx;
			float: left;
			margin-right: 10upx;
		}
		.hot{
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #FFFFFF;
			background-color: #F23A3A;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
		}
		.name{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.text1 {
			font-size: 20upx;
			height: 40upx;
			line-height: 40upx;
			padding: 0upx 10upx;
			color: #F23A3A;
			border: 1upx solid #F23A3A;
			border-radius: 8upx;
			margin-right: 10upx;
			float: left;
			box-sizing: border-box;
			margin-top: 5upx;
			margin-right: 10upx;
		}
		.text2 {
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			float: left;
			line-height: 40upx;
			width: 525upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		image {
			width: 25upx;
			height: 25upx;
			float: right;
			padding: 15upx;
			background-color: pink;
			box-sizing: content-box;
			border-radius: 50%;
		}
	}
	.p2 {
		font-size: 24upx;
		height: 26upx;
		line-height: 26upx;
		margin-top: 20upx;
		color: #333333;
		margin-bottom: 10upx;
		.text1 {
			color: #646464;
		}
		.text2 {
			color: #f23a3a;
		}
	}
}

.goods_bottom {
	margin-top: 20upx;
	background-color: #fff;
	padding: 20upx 30upx;
	box-sizing: content-box;
	> .p1 {
		height: 40upx;
		line-height: 40upx;
		border-bottom: 1upx solid #f2f2f2;
		padding-bottom: 20upx;
		margin-top: 20upx;
		box-sizing: content-box;
		transition: all 0.3s;
		&:active {
			transform: scaleX(0.98);
		}
		.text1 {
			font-size: 28upx;
			color: #333333;
		}
		.text2 {
			font-size: 24upx;
			color: #999999;
			float: right;
		}
		.right {
			width: 20upx;
			height: 20upx;
			margin-top: 15upx;
			margin-right: 0;
		}
		image {
			float: right;
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			margin-right: 10upx;
			transform: translateY(-5upx);
		}
	}
	.bottom_box {
		margin-top: 10upx;
		border-bottom: 1upx solid #f2f2f2;
		> .p1 {
			height: 40upx;
			line-height: 40upx;
			.text1 {
				font-size: 24upx;
				color: #333333;
			}
			.text2 {
				float: right;
				color: #999999;
				font-size: 24upx;
				margin-right: 5upx;
			}
			image {
				float: right;
				width: 12upx;
				height: 22upx;
				margin-top: 10upx;
			}
		}
		.view1 {
			overflow: hidden;
			position: relative;
			.p2 {
				width: 40%;
				margin-top: 20upx;
				float: left;
				image {
					width: 50upx;
					height: 50upx;
					border-radius: 50%;
					float: left;
					margin-top: 3upx;
				}
				text {
					font-size: 24upx;
					font-family: Droid Sans Fallback;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-left: 20upx;
				}
			}
			.p3 {
				width: 55%;
				margin-top: 20upx;
				margin-right: 20upx;
				float: right;
				.text1 {
					font-size: 24upx;
					color: #333;
					display: block;
				}
				.text2 {
					float: left;
					font-size: 22upx;
					color: #999999;
					line-height: 60upx;
				}
			}
			.goto {
				width: 100upx;
				height: 46upx;
				background: rgba(242, 58, 58, 1);
				border-radius: 23upx;
				font-size: 22upx;
				color: #ffffff;
				text-align: center;
				line-height: 46upx;
				position: absolute;
				right: 0;
				bottom: 20upx;
			}
		}
	}
}
.submit {
	width: 290upx;
	height: 76upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx;
	font-size: 32upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	position: fixed;
	text-align: center;
	right: 30upx;
	bottom: 10upx;
	line-height: 76upx;
}
.pop_box {
	width: 660upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10px;
	padding: 30upx 20upx;
	box-sizing: content-box;
	.view1 {
		overflow: hidden;
		position: relative;
		border-bottom: 1upx solid #f2f2f2;
		.p2 {
			width: 40%;
			margin-top: 20upx;
			float: left;
			image {
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				float: left;
				margin-top: 3upx;
			}
			text {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 20upx;
			}
		}
		.p3 {
			width: 60%;
			margin-top: 20upx;
			float: right;
			.text1 {
				font-size: 24upx;
				color: #333;
				display: block;
			}
			.text2 {
				float: left;
				font-size: 22upx;
				color: #999999;
				line-height: 60upx;
			}
		}
		.goto {
			width: 100upx;
			height: 46upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 23upx;
			font-size: 22upx;
			color: #ffffff;
			text-align: center;
			line-height: 46upx;
			position: absolute;
			right: 0;
			bottom: 20upx;
		}
	}
	.p4 {
		text-align: center;
		font-size: 28upx;
	}
	.p5 {
		overflow: hidden;
		margin-top: 10upx;
		> text {
			float: left;
			margin: 0 auto;
			color: #999;
			font-size: 22upx;
			line-height: 60upx;
			margin-left: 30%;
		}
		.item {
		  display: inline-block;
		  width: 35upx;
		  margin: 0 10upx;
		  color: #fff;
		  font-size: 24upx;
		  text-align: center;
		  background-color: #1989fa;
		  border-radius: 5upx;
		  margin-top: 7upx;
		  height: 40upx!important;
		  line-height: 40upx;
		}
	}
	.people {
		overflow: hidden;
		display: flex;
		width: 600upx;
		justify-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		// margin-top: 10upx;
		margin: 10upx auto;
		p {
			flex: 1;
			overflow: hidden;
			max-width: 20%;
			min-width: 20%;
			text-align: center;
			margin-bottom: 10upx;
			image {
				width: 50upx;
				height: 50upx;
				border: 2upx dashed rgba(242, 58, 58, 1);
				border-radius: 50%;
				display: block;
				margin: 0 auto;
			}
			text {
				font-size: 24upx;
			}
		}
	}
}
.close {
	width: 88upx;
	height: 88upx;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.nowAdd {
	width: 130upx;
	height: 46upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 23upx;
	font-size: 22upx;
	font-family: Droid Sans Fallback;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	line-height: 46upx;
	margin: 0 auto;
	margin-top: 40upx;
}
.fx_btn {
	overflow: hidden;
	position: absolute;
	right: 0upx;
	top: 15upx;
	width: 60upx;
	height: 60upx;
	border: none;
	border-radius: 50%;
	background-color: #f23a3a;
	padding: 0 !important;
}
.ewm {
	width: 42upx;
	height: 42upx;
	display: block;
	margin: 0 auto;
	margin-top: 10upx;
}
.h5ewm {
	width: 42upx;
	height: 42upx;
	padding: 20upx;
	border-radius: 50%;
	background-color: #f23a3a;
	position: absolute;
	right: 0upx;
	top: 15upx;
	box-sizing: content-box;
}
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 92%;
		padding: 0 4%;
		height: 70vh;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		// display: flex;
		// flex-wrap: wrap;
		// align-content: space-between;
		box-sizing: content-box;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length {
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text {
				font-size: 30upx;
			}
			.number {
				display: flex;
				justify-content: center;
				align-items: center;
				.input {
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input {
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}

				.sub,
				.add {
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon {
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
}
.layers {
	width: 90vw;
	min-height: 50vh;
	overflow: hidden;
	background-color: #fff;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 30upx;
	.title {
		font-size: 32upx;
		font-weight: bold;
		color: #333333;
		height: 60upx;
	}
	.sku_scroll {
		height: 50vh;
		overflow: hidden;
		margin-top: 30upx;
		.lists {
			overflow: hidden;
			margin-bottom: 20upx;
			.sku_name {
				color: #999999;
				font-size: 28upx;
			}
			.list_box {
				overflow: hidden;
				p {
					float: left;
					height: 60upx;
					line-height: 60upx;
					padding: 0 30upx;
					border: 1upx solid #eeeeee;
					font-size: 24upx;
					border-radius: 15upx;
					margin-right: 20upx;
					margin-top: 20upx;
					transition: all 0.3s;
				}
			}
		}
	}
}
.close {
	height: 80upx;
	width: 80upx;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	margin-top: 30upx;
}
.price_box {
	// height: 10vh;
	.number {
		display: flex;
		float: right;
		overflow: hidden;
		.input {
			width: 50upx;
			height: 50upx;
			margin: 0 10upx;
			// background-color: #f3f3f3;
			input {
				width: 50upx;
				height: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 26upx;
			}
		}
		.sub,
		.add {
			width: 40upx;
			height: 40upx;
			background-color: #f2f2f2;
			border-radius: 50%;
			.icon {
				font-size: 22upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
		}
		.add {
			background-color: #ff0000;
		}
		.sub {
			.icon {
				color: #b3b3b3;
			}
		}
	}
	.p1 {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		.text1 {
			color: #999999;
			font-size: 24upx;
		}
		.text2 {
			color: #333333;
			margin-right: 10upx;
			font-size: 24upx;
		}
	}
	.bottom {
		height: 80upx;
		margin-top: 30upx;
		.left {
			font-size: 40upx;
			color: #f9493d;
			float: left;
			margin-top: 20upx;
		}
		.right {
			//
			// padding: 10upx 20upx;
			// background-color: #ffd25f;
			// color: #333;
			// margin-top: 20upx;
			// border-radius: 15upx;
			// height: 100upx;
			width: 290upx;
			height: 76upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 38upx;
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			float: right;
			text-align: center;
			line-height: 76upx;
		}
		.noactive {
			background-color: #ccc;
			opacity: 0.4;
			color: #333;
			pointer-events: none;
			width: 290upx;
			height: 76upx;
			background: rgba(242, 58, 58, 1);
			border-radius: 38upx;
			font-size: 32upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			float: right;
			text-align: center;
			line-height: 76upx;
		}
	}
}
.noneActive {
	//规格禁用
	background-color: #ccc;
	opacity: 0.4;
	color: #000;
	pointer-events: none;
}
.productActive {
	border: 1upx solid #1a1a29;
}
.kucun {
	color: #999999;
	font-size: 24upx;
	margin-bottom: 5upx;
}
.item {
  display: inline-block;
  width: 35upx;
  margin: 0 10upx;
  color: #fff;
  font-size: 24upx;
  text-align: center;
  background-color: #1989fa;
  border-radius: 5upx;
  margin-top: 7upx;
  height: 40upx!important;
  line-height: 40upx;
}
/deep/.uni-countdown__number{
	width: 45upx!important;
	margin: 0 10upx;
	height: 40upx!important;
	color: #fff;
	font-size: 24upx;
	text-align: center;
	border-radius: 5upx;
	margin-top: 10upx;
}
</style>
